{% extends "public/layout.html" %}

{% block body %}
    <table class="table table-striped">
        <tr>
            <th>#</th>
            <th>用户id</th>
            <th>用户名</th>
            <th>中文名</th>
            <th>email</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        {% for user in page_obj.object_list %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.profile.name }}</td>
            <td>{{ user.email }}</td>
            <td class="user_status">
                {% if user.is_active %}
                    <span class="glyphicon glyphicon-ok-circle text-success"></span>正常
                {% else %}
                    <span class="glyphicon glyphicon-warning-sign text-warning"></span>禁止
                {% endif %}
            </td>
            <td>
                <div class="btn-group">
                    <div class="btn-group">
                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false">
                            修改
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                        </ul>
                    </div>
                    {% if user.is_active %}
                        <button type="button" class="btn btn-sm btn-warning modify_user_status" status="true" data="{{ user.id }}">禁用</button>
                    {% else %}
                        <button type="button" class="btn btn-sm modify_user_status btn-info" status="false" data="{{ user.id }}">开启</button>
                    {% endif %}
                </div>
            </td>
        </tr>
        {% endfor %}
    </table>

    <div class="panel-default">
        <center>
            <ul class="pagination">
                <li><a href="/user/userlist/?page=1">首页</a></li>
                    {% if page_obj.has_previous %}
                    <li><a href="/user/userlist/?page={{ page_obj.previous_page_number }}">上一页</a></li>
                    {% else %}
                        <li class="disabled"><a href="#">上一页</a></li>
                    {% endif %}

                    {#  {% for p in page_obj.paginator.page_range %} #}
                    {% for p in page_range %}
                        <li {% if page_obj.number == p %} class="active" {% endif %}><a href="/user/userlist/?page={{ p }}">{{ p }}</a></li>
                    {% endfor %}

                    {% if page_obj.has_next %}
                        <li><a href="/user/userlist/?page={{ page_obj.next_page_number }}">下一页</a></li>
                    {% else %}
                        <li class="disabled"><a href="#">下一页</a></li>
                    {% endif %}
                <li><a href="/user/userlist/?page={{ page_obj.paginator.num_pages }}">末页</a></li>
            </ul>
        </center>
    </div>
{% endblock %}

{% block js %}
<script>
    function change_user_status(status_td_obj, status){
        if (status == "true"){
            status_td_obj.html('<span class="glyphicon glyphicon-warning-sign text-warning"></span>禁止')
        }else{
            status_td_obj.html('<span class="glyphicon glyphicon-ok-circle text-success"></span>正常')
        }
    }
    function modify_user_status(user_id){
        $.post("/user/modifystatus/", {"user_id": user_id}, function(res){
            if (res.status != 0){
                swal({
                    title: res.errmsg,
                    type: "error",
                    confirmButtonText: "知道了"
                });
            }
        })
    }
    $(function(){
        $(".modify_user_status").click(function(){
            var click_obj = $(this);
            var status = click_obj.attr("status");
            if(status === "true"){
                click_obj.removeClass("btn-warning").addClass("btn-info").attr("status", "false").text("开启");
            }else{
                click_obj.removeClass("btn-info").addClass("btn-warning").attr("status", "true").text("禁用");
            }
            change_user_status(click_obj.parents("td").siblings(".user_status"), status);
            modify_user_status(click_obj.attr('data'));
        });
    })
</script>
{% endblock %}

